<!--
 * @Author: your name
 * @Date: 2021-06-29 09:16:45
 * @LastEditTime: 2021-07-04 00:34:16
 * @LastEditors: hlyScarlet
 * @Description: 登录页面
 * @FilePath: \briup\day15\mobile-app\src\views\login.vue
-->
<template>
  <div id="tologin">
    <!-- 标题 -->
    <div class="hearder">易洁家政</div>
    <!-- 登录 -->
    <div class="login" v-if="ishow">
      <van-form @submit="onSubmit" id="form">
        <van-field
          v-model="form.username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="form.password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >登录</van-button
          >
        </div>
        <div style="margin-bottom: 5%">
          <span style="color: #4e95f7" @click="zhuce">没有账号?点击注册</span>
        </div>
      </van-form>
    </div>

    <!-- 第二个 -->
    <div class="login" v-else>
      <van-form validate-first @failed="onFailed" id="form">
        <!-- 通过 pattern 进行正则校验 -->
        <van-field
          label="用户名"
          v-model="isForm.username"
          name="pattern"
          placeholder="用户名"
          :rules="[
            { pattern: isForm.pattern, message: '请输入4-16位数字字符' },
          ]"
        />
        <!-- 通过 validator 进行函数校验 -->
        <van-field
          label="密码"
          v-model="isForm.password"
          name="validator"
          type="password"
          placeholder="密码"
          :rules="[{ validator, message: '密码长度为6位以上' }]"
        />
        <!-- 通过 validator 进行异步函数校验 -->
        <van-field
          label="再次输入"
          v-model="isForm.password1"
          name="asyncValidator"
          type="password"
          placeholder="密码"
          :rules="[{ validator: asyncValidator, message: '请输入正确密码' }]"
        />
        <div style="margin: 16px">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            @click="goRegister"
            >提交</van-button
          >
        </div>
        <div style="margin-bottom: 5%">
          <span style="color: #4e95f7" @click="zhuce">已有账号。去登陆</span>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { login, register } from "@/api/user";
import { setToken } from "@/utils/auth";
import "../../styles/login1.css";
import { Notify, Toast, Dialog } from "vant";
export default {
  data() {
    return {
      isForm: {
        username: "",
        password: "",
        password1: "",
        pattern: /[\u4E00-\u9FA5]/,
      },
      ishow: true,
      form: {
        username: "",
        password: "",
      },
      tokenmess: "",
    };
  },
  computed: {},
  methods: {
    async onSubmit() {
      Toast.loading({ message: '加载中...', forbidClick: true, overlay:true , duration:9000});

      // 发请求,获取到后台的token，保存到cookies里，获取当前登录的用户信息
      let res = await login(this.form);
      setToken(res.data.token);
      // 跳转路由
      this.$router.push("/index");
      Toast.clear();

    },
    zhuce() {
      this.ishow = !this.ishow;
    },
    validator(val) {
      return /^[A-Za-z0-9]{6,20}$/.test(val);
    },
    // 异步校验函数返回 Promise
    asyncValidator(val) {
      return new Promise((resolve) => {
        // Toast.loading("验证中...");

        setTimeout(() => {
          Toast.clear();
          resolve(/^[A-Za-z0-9]{6,20}$/.test(val));
        }, 1000);
      });
    },
    async goRegister() {
      if (
        this.isForm.password != "" &&
        this.isForm.password1 != "" &&
        this.isForm.username != ""
      ) {
        if (this.isForm.password == this.isForm.password1) {
          let res = await register({
            username: this.isForm.username,
            password: this.isForm.password,
          });
          Dialog.alert({
            message: res.message,
          }).then(() => {
            // on close
          });
          this.$router.go(0);
        } else {
          Notify({ type: "danger", message: "两次密码不匹配！" });
        }
      } else {
        Toast.fail("请填入完整信息！");
      }
    },
    onFailed(errorInfo) {
      console.log("failed", errorInfo);
    },
  },
  created() {},
  created() {},
  mounted() {},
};
</script>
<style scoped>
</style>